<template>
	<view class="container">
		<view class="brand-info">
			<view class="name">
				<image class="img" :src="brand.picUrl" background-size="cover"></image>
				<view class="info-box">
					<view class="info">
					</view>
				</view>
			</view>
			<view class="desc">
				{{brand.desc}}
			</view>
		</view>

		<view class="cate-item">
			<view class="b">
				<block v-for="(iitem,iindex) in goodsList" :key="iindex">
					<view class="item " :class="iindex % 2 == 0 ? 'item-b' : ''" @tap="gotoGoods(iitem.id)">
						<image class="img" :src="iitem.picUrl" background-size="cover"></image>
						<text class="name">{{iitem.name}}</text>
						<view class="price">
							<view class="priceTg jhx_f8">￥{{iitem.retailPrice}}</view>
							<view class="brokerage" v-if="isAgent && iitem.brokeragePrice>0.01">赚￥{{iitem.brokeragePrice}}</view>
							<view class="brokerage" v-else>立即购买</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				id: 0,
				brand: {},
				goodsList: [],
				isAgent: false,
				page: 1,
				size: 10,
				totalPages: 1
			}
		},
		onShareAppMessage: function() {
			let that = this;
			let userInfo = that.user;
			let shareUserId = 1;
			if (userInfo) {
				shareUserId = userInfo.userId;
			}
			console.log('/pages/index/index?scene=brand,' + that.brand.id + '&shareUserId=' + shareUserId);
			return {
				title: that.brand.name,
				//desc: that.data.brand.desc,
				path: '/pages/index/index?scene=brand,' + that.brand.id + '&shareUserId=' + shareUserId
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			var that = this;
			that.id = parseInt(options.id);
			this.getBrand();
		},
		onShow: function() {
			let that = this;
			let userInfo = that.user;
			if (userInfo && userInfo.userLevel == 2) {
				that.isAgent = true;
			}
		},
		onReachBottom: function() {
			if (this.totalPages > this.page) {
				this.page = this.page + 1;
			} else {
				uni.showToast({
					title: '已经到底了!',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			this.getGoodsList();
		},
		methods: {
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../goods/goods?id=' + goodsId
				})
			},
			getBrand: function() {
				let that = this;
				that.$util.request(that.$api.api.BrandDetail, {
					id: that.id
				}).then(function(res) {
					if (res.errno === 0) {
						that.brand = res.data.brand;
						that.getGoodsList();
					}
				});
			},
			getGoodsList() {
				var that = this;

				that.$util.request(that.$api.api.GoodsList, {
						brandId: that.id,
						page: that.page,
						size: that.size
					})
					.then(function(res) {
						if (res.errno === 0) {
							that.goodsList = that.goodsList.concat(res.data.goodsList);
							that.totalPages = res.data.totalPages;
						}
					});
			},
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
	}

	.brand-info .name {
		width: 100%;
		height: 290rpx;
		position: relative;
	}

	.brand-info .img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 290rpx;
	}

	.brand-info .info-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 290rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.brand-info .info {
		display: block;
	}

	.brand-info .txt {
		display: block;
		height: 37.5rpx;
		font-size: 37.5rpx;
		color: #fff;
	}

	.brand-info .line {
		margin: 0 auto;
		margin-top: 16rpx;
		display: block;
		height: 2rpx;
		width: 145rpx;
		background: #fff;
	}

	.brand-info .desc {
		background: #fff;
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 21.5rpx 31.25rpx;
		font-size: 30rpx;
		color: #666;
		line-height: 41.5rpx;
		text-align: left;
	}

	.cate-item .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		border-top: 1rpx solid #f4f4f4;
		margin-top: 20rpx;
	}

	.cate-item .b .item {
		float: left;
		background: #fff;
		width: 375rpx;
		padding-bottom: 33.333rpx;
		border-bottom: 1rpx solid #f4f4f4;
		height: auto;
		overflow: hidden;
		text-align: center;
	}

	.cate-item .b .item-b {
		border-right: 1rpx solid #f4f4f4;
	}

	.cate-item .item .img {
		margin-top: 10rpx;
		width: 302rpx;
		height: 302rpx;
	}

	.cate-item .item .name {
		display: block;
		width: 365.625rpx;
		height: 35rpx;
		padding: 0 20rpx;
		overflow: hidden;
		margin: 11.5rpx 0 22rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #333;
	}

	.cate-item .item .price {
		display: flex;
		width: 365.625rpx;
		height: 50rpx;
		text-align: center;
	}

	.cate-item .b .priceTg {
		width: 50%;
	}

	.cate-item .b .brokerage {
		float: left;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 45%;
	}
</style>
